Carousel 輪播
- 輪播可以包含圖片或影片，並可選擇新增標籤文字。
- 四種佈局型別：多瀏覽（Multi-browse）、無邊界（Uncontained）、主視覺（Hero）和全屏（Full-screen）。
- 支援左對齊或居中對齊的佈局方式。
- 滾動時，輪播項具有視差效果（Parallax effect）。
- 專案大小會隨著輪播滾動動態變化。
研究（Research）
Material 研究團隊進行了兩項研究（定量和定性），涉及200 多名參與者，以瞭解使用者對五種不同輪播設計的看法。
研究測量了使用者對輪播互動的理解、對專案數量的預期，以及他們對輪播用途的期望。
研究結果（Summary of findings）：
- 參與者認為輪播是探索多種內容的好方式。
- 部分內容預覽或被裁剪的專案，能有效提示使用者可滑動檢視更多內容。
- 使用者普遍期望輪播包含約 10 個專案，並支援同時滾動多個專案。
- 儘管某些輪播設計在特定場景下更合適，但所有設計都被認為具有相似的可用性。
Color 顏色
States 狀態
Carousel item dynamic widths 輪播項動態寬度
Multi-browse 多瀏覽
多瀏覽佈局至少顯示一個大、中、小輪播項。
| 屬性（Attribute） | 值（Value） |
| 對齊方式（Alignment） | 垂直居中（Vertically centered） |
| 左右邊距（Leading/trailing padding） | 16dp |
| 頂部/底部邊距（Top/bottom padding） | 8dp |
| 專案之間的間距（Padding between elements） | 8dp |
| 大尺寸專案寬度（Large item width） | 動態（Dynamic） |
| 小尺寸專案寬度（Small item width） | 40-56dp，動態調整（Dynamic） |
| 圓角（Item corner radius） | 28dp |
Uncontained 無邊界模式
無邊界輪播的特點是內容可以延伸到螢幕邊緣。這種設計讓使用者在滑動瀏覽時能看到更多內容，視覺效果更加開放和流暢。
| 屬性（Attribute） | 值（Value） |
| 對齊方式（Alignment） | 垂直居中（Vertically centered） |
| 左右邊距（Leading padding） | 16dp |
| 頂部/底部邊距（Top/bottom padding） | 8dp |
| 專案之間的間距（Padding between elements） | 8dp |
| 圓角（Item corner radius） | 28dp |
Hero 主視覺模式
Hero 輪播佈局至少包含一個大尺寸專案和一個小尺寸專案，適用於重點內容展示。
| 屬性（Attribute） | 值（Value） |
| 對齊方式（Alignment） | 垂直居中（Vertically centered） |
| 左右邊距（Leading/Trailing padding） | 16dp |
| 頂部/底部邊距（Top/bottom padding） | 8dp |
| 專案之間的間距（Padding between elements） | 8dp |
| 大尺寸專案寬度（Large item width） | 動態（Dynamic） |
| 小尺寸專案寬度（Small item width） | 40–56dp，動態調整（Dynamic） |
| 圓角（Item corner radius） | 28dp |
Center-aligned hero 居中主視覺模式
該佈局至少包含一個大尺寸專案和兩個小尺寸專案，使主視覺內容始終位於視線中心，適用於精選推薦內容。
| 屬性（Attribute） | 值（Value） |
| 對齊方式（Alignment） | 垂直居中（Vertically centered） |
| 左右邊距（Leading/Trailing padding） | 16dp |
| 頂部/底部邊距（Top/bottom padding） | 8dp |
| 專案之間的間距（Padding between elements） | 8dp |
| 大尺寸專案寬度（Large item width） | 動態（Dynamic） |
| 小尺寸專案寬度（Small item width） | 40–56dp，動態調整（Dynamic） |
| 圓角（Item corner radius） | 28dp |
Center-aligned hero 居中對齊的英雄元素
居中對齊的英雄元素佈局至少顯示一個大專案和兩個小專案。
| Attribute 屬性 | Value 值 |
| Alignment 對齊 | Vertically centered 垂直居中 |
| Leading/Trailing padding 前導/尾隨填充 | 16dp 16 密度無關畫素 |
| Top/bottom padding 上下填充 | 8dp 8 畫素密度無關畫素 |
| Padding between elements 元素之間的填充 | 8dp 8 畫素密度無關畫素 |
| Large item width 大型專案寬度 | Dynamic 動態的 |
| Small item width 小專案寬度 | 40-56dp, dynamic 40 - 56dp，動態 |
| Item corner radius 專案邊角半徑 | 28dp |
Full-screen 全屏模式
全屏輪播佈局允許單個超大尺寸專案填充整個螢幕，提供沉浸式體驗，適用於全屏廣告或影片播放。
| 屬性（Attribute） | 值（Value） |
| 對齊方式（Alignment） | 居中（Centered） |
| 左右邊距（Leading/Trailing padding） | 0dp |
| 頂部/底部邊距（Top/bottom padding） | 0dp |
| 專案之間的間距（Padding between elements） | 16dp |
Usage 使用方法
輪播圖是一種可左右滑動的內容展示方式。它主要用來展示圖片，也可以搭配簡短的文字說明，文字會自動調整以適應不同大小的輪播專案。
有兩種滑動方式：
- 普通滑動：內容可以自由滑動，適合無邊界佈局。
- 自動對齊滑動：內容會自動對齊到固定位置，適合多瀏覽、主視覺和全屏佈局。
